import React, { memo,useState } from 'react'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Form, Input,Modal,message } from 'antd';
import { useNavigate } from 'react-router-dom';
import { login, sendCaptcha,forgetPwd } from '../../../../api/login';
const clogin = memo((props) => {
  const navigate = useNavigate()
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [loadings, setLoadings] = useState(false);
  const [disabled, setDisabled] = useState(false)
  const [loadingsa, setLoadingsa] = useState(false);
  const [disableda, setDisableda] = useState(false)
  const [vala, setVala] = useState('')
  const [valb, setValb] = useState('')
  const [valc, setValc] = useState('')
  const [isShow, setIsShow] = useState(false)
  const [messageApi, contextHolder] = message.useMessage();
  const onFinish = (values) => {
    console.log(values); 
    // let params ={
    //   account:values
    //   certificate:
    // }
    // login(values).then(res => {
    //   if (!res.data.success) {
    //     messageApi.error(res.data.errorMessage)
    //   } else {
    //     // console.log('验证码登录',res.data.result);
    //     localStorage.setItem('userInfo',res.data.result);
    //     // let userinfo = JSON.parse(JSON.stringify(res.data.result))
    //     // console.log(userinfo);
    //     messageApi.info('登录成功');
    //     navigate('/home')
    //     dispatch(user(res.data.result))
    //   }
    // })
    // console.log('用户登录', params);
  };
  const onCode = () => {
    navigate('/login/code')
  }
  const onEmail = () => {
    navigate('/login/email')
  }
  const handleOk = () => {
    let obj={
      account:vala,
      captcha:valb,
      password:valc
    }
    console.log(obj)
    setIsModalOpen(false);
  };
  const handleCancel = () => {

    setIsModalOpen(false);
  };
  const handleChangea = (v) => {
    setVala(v.target.value)
  }
  const handleChangeb = (v) => {
    setValb(v.target.value)
  }
  const handleChangec = (v) => {
    setValc(v.target.value)
  }
  //忘记密码
  const onFinisha = (values) => {
    console.log('表单对象',values)
    forgetPwd(values).then(res=>{
      console.log('打印修改密码后的东东',res)
      messageApi.info('修改成功');
      setIsModalOpen(false)
    }).catch(err=>{
      messageApi.error(err)
    })
  };
  const showModal = () => {
    setIsModalOpen(true);
  }
  //忘记密码获取验证码
  const getCodera = () => {
    sendCaptcha(vala).then((res) => {
      console.log('打印用户信息');
      if (!res.data.success) {
        messageApi.error(res.data.errorMessage)
      } else {
        messageApi.info('验证码已发送');
      }
      setLoadingsa(false)
      setDisableda(false)
    }).catch(err => {
      setLoadingsa(false)
      setDisableda(false)
    })
  }
  return (
    <div>
      <Form
      name="normal_login"
      className="login-form"
      initialValues={{
        remember: true,
      }}
      size='large'
      onFinish={onFinish}
    >
      <Form.Item
        name="username"
        rules={[
          {
            required: true,
            message: '请输入手机号',
          },
        ]}
      >
        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入手机号" />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[
          {
            required: true,
            message: '请输入密码!',
          },
        ]}
      >
        <Input
          prefix={<LockOutlined className="site-form-item-icon" />}
          type="password"
          placeholder="请输入密码"
        />
      </Form.Item>
      <div style={{display:'flex',gap:'10px',marginBottom:'10px'}}>
        <span onClick={() => onCode()} style={{cursor:'pointer',color:'#1677ff'}}>验证码登录</span>
        {/* <span onClick={() => onEmail()} style={{cursor:'pointer',color:'#1677ff'}}>邮箱登录</span> */}
        <span style={{ cursor: 'pointer', color: 'blue' }} onClick={showModal}>忘记密码</span>
      </div>
      <Form.Item>
        <Button block type="primary" htmlType="submit" className="login-form-button">
          登 录
        </Button>
      </Form.Item>
    </Form>
    <Modal title="忘记密码" cancelText='取消' okText='关闭' open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <Form
          name="forgetName"
          className="login-form"
          initialValues={{
            remember: true,
          }}
          size='large'
          onFinish={onFinisha}
        >
          {contextHolder}
          <Form.Item
            name="account"
            rules={[
              {
                required: true,
                message: '请输入手机号！',
              },
            ]}
          >
            <Input value={vala} onChange={(value) => handleChangea(value)} prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入手机号" />
          </Form.Item>
          <Form.Item
            name="captcha"
            rules={[
              {
                required: true,
                message: `请输入${isShow ? '密码' : '验证码!'}`,
              },
            ]}
          >
            <div style={{ display: 'flex', gap: '5px' }}>
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="code"
                value={valb}
                onChange={(value) => handleChangeb(value)}
                placeholder={`请输入${isShow ? '密码' : '验证码!'}`}
              />
              {
                isShow ? '' : <Button disabled={disableda} loading={loadingsa} onClick={() => getCodera()} type='primary'>获取验证码</Button>
              }
            </div>
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: '请输入新密码！',
              },
            ]}
          >
            <Input value={valc} onChange={(value) => handleChangec(value)} prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入新密码" />
          </Form.Item>
          <Form.Item>
            <Button block type="primary" htmlType="submit" className="login-form-button">
              提交
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
})

export default clogin

